import React from 'react';
import './Category.less';
import './../../../pages/amap/icon/css/icon.less';

export default class Category extends React.Component {

  constructor(props) {
    super(props);
  }

  onClick(props) {
    this.props.onClick(props);
  }

  render() {

    let ret;
    if (this.props.currentMarkerCategory.type === 'YC') {
      ret = <div className="custom-layer-button-lt">
        <div className="kuma-row div-height" onClick={() => {this.onClick({type: 'YC', color: 'green'})}}>
          <div className="col-xs-6">
            <div className="hi-icon-wrap hi-icon-effect-8">
              <span className="hi-icon-green hi-icon-location"/>
            </div>
          </div>
          <div className="col-xs-18">绿色工地</div>
        </div>
        <div className="kuma-row div-height" onClick={() => {this.onClick({type: 'YC', color: 'yellow'})}}>
          <div className="col-xs-6">
            <div className="hi-icon-wrap hi-icon-effect-8">
              <span className="hi-icon-orange hi-icon-location"/>
            </div>
          </div>
          <div className="col-xs-18">黄色预警</div>
        </div>
        <div className="kuma-row div-height" onClick={() => {this.onClick({type: 'YC', color: 'red'})}}>
          <div className="col-xs-6">
            <div className="hi-icon-wrap hi-icon-effect-8">
              <span className="hi-icon-red hi-icon-location"/>
            </div>
          </div>
          <div className="col-xs-18">红色预警</div>
        </div>
      </div>
    } else {
      ret = <div className="custom-layer-button-lt">
        <div className="kuma-row div-height" onClick={() => {this.onClick({type: 'ENG', color: 'green'})}}>
          <div className="col-xs-6">
            <div className="hi-icon-wrap hi-icon-effect-8">
              <span className="hi-icon-green hi-icon-location"/>
            </div>
          </div>
          <div className="col-xs-18">在建项目</div>
        </div>
        <div className="kuma-row div-height" onClick={() => {this.onClick({type: 'ENG', color: 'blue'})}}>
          <div className="col-xs-6">
            <div className="hi-icon-wrap hi-icon-effect-8">
              <span className="hi-icon-blue hi-icon-location"/>
            </div>
          </div>
          <div className="col-xs-18">竣工项目</div>
        </div>
      </div>
    }

    return ret;
  }
}
